import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { Card, Button, Space, notification } from 'antd';
import SetForm from './components/SetForm';
import request from 'axios';
const PromoterGroup = (props) => {
    const { dispatch, loading, list } = props;
    const [visible, setVisible] = useState(false);
    const [selectedRow, setSelectedRow] = useState({
        selectedRowKeys: [],
        type: 'checked',
        preserveSelectedRowKeys: true,
        onChange: (val, selectedRows) => {
            setSelectedRow({
                ...selectedRow,
                selectedRowKeys: val,
            });
        },
    });
    const [plVisible, setPlvisible] = useState(false);
    const handleCallBack = () => {
        setSelectedRow({
            ...selectedRow,
            selectedRowKeys: [],
        });
        childRef.current.fetchGetData();
    };

    const childRef = useRef();
    const searchItems = [
        {
            label: '分组名称',
            name: 'keyword',
        },
    ];
    const extraBtn = [
        {
            text: '新增',
            onClick: () => {
                setVisible({
                    show: true, detail: {},
                    type: "install"
                })
            },
        },

        {
            text: plVisible ? '取消批量删除' : '批量删除',
            typeBtn: 'primary',
            onClick: () => {
                plVisible ? setPlvisible(null) : setPlvisible(true);
            },
        },
        {
            text: '删除分组',
            typeBtn: 'default',
            show: plVisible,
            onClick: () => {
                if (selectedRow.selectedRowKeys.length === 0) {
                    return notification.warn({
                        message: '温馨提示',
                        description: `请先选择要删除的分组`,
                    });
                } else {
                    dispatch({
                        type: 'promoter/fakeDeletePromoterGroup',
                        payload: { idList: selectedRow.selectedRowKeys },
                        callback: (e) => {
                            handleCallBack();
                        },
                    });
                }

            },
        },
    ];

    const getColumns = [
        {
            title: '分组名称',
            dataIndex: 'groupName',
        },
        {
            type: 'handle',
            width: 200,
            dataIndex: 'id',
            render: (val, record) => [
                {
                    type: 'edit',
                    click: () => {
                        setVisible({
                            show: true, detail: record
                        })
                    },
                },
                {
                    title: '设为默认',
                    visible: record.defaultFlag !== '1',
                    click: () => {
                        dispatch({
                            type: 'promoter/fakeSetDefaultPromoterGroup',
                            payload: { id: val },
                            callback: (e) => {
                                handleCallBack();
                            },
                        });
                    },
                },
                {
                    title: '删除',
                    click: () => {
                        dispatch({
                            type: 'promoter/fakeDeletePromoterGroup',
                            payload: { idList: [val] },
                            callback: (e) => {
                                handleCallBack();
                            },
                        });
                    },
                },
            ],
        },
    ];


    return (
        <Space size={'large'} direction='vertical' style={{ width: '100%', }}>
            <TableDataBlock
                cRef={childRef}
                searchItems={searchItems}
                rowSelection={plVisible ? selectedRow : false}
                btnExtra={extraBtn}
                columns={getColumns}
                loading={loading}
                rowKey={(record) => `${record.id}`}
                dispatchType='promoter/fetchListPromoterGroup'
                {...list}
            ></TableDataBlock>
            <SetForm handleCallback={handleCallBack} visible={visible} onClose={() => setVisible(false)}></SetForm>
        </Space>

    );
};
export default connect(({ loading, promoter }) => ({
    list: promoter.promoterGroupList,
    loading: loading.models.promoter,
}))(PromoterGroup);
